<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="keywords" content="" />

<!--// Meta tag Keywords -->

	<!-- Recent Trips section css files-->
	<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
	<link href="css/owl.theme.css" rel="stylesheet">
	<!-- //Recent Trips section css files -->

	<!-- Testimonials -->
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
	<!-- //Testimonials -->

	<!-- css files -->
	<link rel="stylesheet" href="css/bootstrap.css"> <!-- Bootstrap-Core-CSS -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <!-- Style-CSS --> 
	<link rel="stylesheet" href="css/font-awesome.css"> <!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->

	<!-- web-fonts -->
	<link href="http://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">

	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
	<style>
	body{
	padding:0;
	margin:0;
	background: #272525;
	position:relative !important;
	font-family: 'Montserrat', sans-serif;
    }	
	</style>
</head>

<body>
    <!-- Header -->
    <div class="header">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1><a href="#">Melbourne Travel</a></h1>
            </div>
            <div class="top-nav-text">
                <ul class="social_agileinfo">
                    <li><a href="https://www.facebook.com/" class="w3_facebook"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="https://twitter.com/" class="w3_twitter"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="https://www.instagram.com/" class="w3_instagram"><i class="fa fa-instagram"></i></a></li>
                    <li><a href="https://www.google.com/" class="w3_google"><i class="fa fa-google-plus"></i></a></li>
                </ul>
            </div>
            <!-- navbar-header -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav navbar-right">
				  <li>
					<a
					  class="hvr-underline-from-center scroll"
					  style="color: #da9d40"
					  href="index.html"
					  >Home</a
					>
				  </li>
				  <li>
					<a
					  href="urban_development.html"
					  class="hvr-underline-from-center "
					  >Urban Development</a
					>
				  </li>
				  <li>
					<a
					  href="exploration.html"
					  class="hvr-underline-from-center "
					  
					  >Exploration</a
					>
				  </li>
				  <li>
					<a href="transport.html" class="hvr-underline-from-center "
					  >Transport</a
					>
				  </li>
				  <li>
					<a class="hvr-underline-from-center " href="gallery.html"
					  >Gallery</a
					>
				  </li>
				</ul>
			  </div>
	  
			  <div class="clearfix"></div>
			</nav>
		  </div>
    <!-- //Header -->
<!-- Slider -->
<section class="slider" style="height: calc(100vh-78px);" >
	<div class="callbacks_container" style="height: calc(100vh-78px);" >
		<ul class="rslides" id="slider" style="height: calc(100vh-78px);" >
			<li style="height: calc(100vh-78px);" >
				<div class="w3layouts-banner-top w3layouts-banner-top1">
					<div class="banner-dott">
                  
					</div>
				</div>
			</li>
			<li style="height: calc(100vh-78px);" >
				<div class="w3layouts-banner-top">
					<div class="banner-dott">
              
					</div>
				</div>
			</li>
			<li style="height: calc(100vh-78px);" >
				<div class="w3layouts-banner-top w3layouts-banner-top3">
					<div class="banner-dott">
                       
					</div>
				</div>
			</li>
			<li style="height: calc(100vh-78px);" >
				<div class="w3layouts-banner-top w3layouts-banner-top2">
					<div class="banner-dott">
                    
					</div>
				</div>
			</li>
			
			<li style="height: calc(100vh-78px);" >
				<div class="w3layouts-banner-top w3layouts-banner-top4">
					<div class="banner-dott">
					</div>
				</div>
			</li>
		</ul>
        <div class="callbacks_container" style="height: calc(100vh-78px);" >
            <div class="slider-info">
                    <div >
                    <div class="border-top h2" id="info1"></div>
                    <div class="border-top h4" id="info2"></div>
                    <div>
                    <a href="urban_development.html"><div class="downbutton">
                    </div></a>
            </div>
        </div>
	</div>
</section>
<!-- //Slider -->
			


</body>

<!-- js-scripts -->		

	<!-- js -->
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script> <!-- Necessary-JavaScript-File-For-Bootstrap --> 
	<!-- //js -->	
	<!-- type word -->
   <script type="text/javascript">
	var count1 = 0;
	var count2 = 0;
	var typingtext1 ="<h1>TRAVEL IS THE ONLY THING</h1>";
	var typingtext2 ="WELCOME TO MELBOURNE";

	var myBlock1 = document.getElementById("info1");
	var myBlock2 = document.getElementById("info2");
	// 这里是将字符串的文本解析为HTML
	function type() {
	  if (count1 <= typingtext1.length) {
		myBlock1.innerHTML = typingtext1.substring(0, count1);
		count1++;
	  } else {
		window.clearInterval(intervalID);
	  }
	}
	function type2() {
		if (count2 <= typingtext2.length) {
	  myBlock2.innerHTML = typingtext2.substring(0, count2);
	  count2++;
	} else {
	  window.clearInterval(intervalID);
	}
	}
	
	// 这里定义速度，单位为毫秒
	var intervalID = window.setInterval(type, 45);
	var intervalID = window.setInterval(type2, 65);
</script>
<!-- //type word -->
	<!--  Testimonials js-->
	<script defer src="js/jquery.flexslider.js"></script>
	<!--Start-slider-script-->
		<script type="text/javascript">
		
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
	  </script>
	<!--End-slider-script-->
	<!--  //Testimonials js-->

	<!-- Recent Trips js file-->
	<script src="js/owl.carousel.js"></script>
		<!-- Recent Trips Script-->
		<script>
		$(document).ready(function() { 
			$("#owl-demo").owlCarousel({
		 
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				autoPlay:true,
				items : 3,
				itemsDesktop : [640,5],
				itemsDesktopSmall : [414,4]
		 
			});
			
		}); 
		</script>
		<!-- //Recent Trips section Script-->
	<!-- //Recent Trips js file-->

	<!-- start-smoth-scrolling -->
	<script src="js/SmoothScroll.min.js"></script>
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
	</script>
	<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
	<!-- //here ends scrolling icon -->
	<!-- start-smoth-scrolling -->

	<!-- Banner-js -->
	<script src="js/responsiveslides.min.js"></script>
	<script>
		$(function () {
			$("#slider").responsiveSlides({
				auto: true,
				pager:false,
				nav: true,
				speed: 1000,
				namespace: "callbacks",
				before: function () {
					$('.events').append("<li>before event fired.</li>");
				},
				after: function () {
					$('.events').append("<li>after event fired.</li>");
				}
			});
		});
	</script>
	<!-- //Baneer-js -->


<!-- //js-scripts -->
</html>
